<template>
  <div>
    <h1>我是父组件</h1>
    <hr />
    <HmSon :toSonMoney="money" sonName="张三" :arr="[1, 2, 3, 4, 5]"></HmSon>

    <!-- 
      组件传值 
         父传子
            传  <HmSon :属性名="money" 属性名2='值2'    />
                父组件内有一个data  money
            收：
               props:['属性名','属性名2']
               使用父传子属性  {{属性名}}   js  this.属性名
            子组件内可以展示渲染，但不可以修改相应的值（单向数据流）
     -->
  </div>
</template>
<script>
import HmSon from '@/components/HmSon.vue'
export default {
  components: {
    HmSon
  },
  data () {
    return {
      num: 1,
      money: 100
    }
  },
  methods: {
    fn () {
      console.log('fn')
    }
  },
  computed: {},
  watch: {},
  filters: {},
  beforeCreate () {
    console.log('beforeCreate')
    setTimeout(() => {
      console.log(this.num)
      this.fn()
    }, 5000)
  },
  created () {
    console.log('created')
  }

  /*
  创建期
     创建前(beforeCreate)：实例化还没有完成，所以不能访问data与methods。实际开发几乎不用
     创建后(created)：实例化已完成，可以访问data与methods等内容，非常用有（常用于进入页面接口调用）
     上面二生命周期只会触发一次,它的特点只是在做同步操作时才有，做了异步操作可能都改变了
     所有生命周期都是function函数，它都会自己执行，不需要调用
  */
}
</script>
<style></style>
